{include file="common/header"}
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<style type="text/css">
    #copy{display: none}
    .userinvite-list{overflow: auto;padding: 0 20px;height: calc(100vh - 250px);}
    .userinvite-list .item{padding:16px 0;position: relative;border-bottom: 1px dashed #eee;}
    .userinvite-list .item img{width: 50px;display: inline-block;vertical-align: middle;}
    .userinvite-list .item .details{display: inline-block;margin-left: 10px;vertical-align: middle;}
    .userinvite-list .item .title{font-size: 16px;color: #333;display: block;}
    .userinvite-list .item .tag{display: inline-block;color: #777;font-size: 14px;margin-right:10px;margin-top: 5px}
    .userinvite-list .item .time{float: right;color: #777;font-size: 12px;text-align: right;}
</style>
</style>
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-user">
            {include file="user/site"}
            <el-card class="box-card content">
                <div slot="header" class="search">
                    <el-button type="primary" size="small" @click="copyShaneUrl()">复制邀请链接</el-button>
                </div>
                <div class="userinvite-list" v-infinite-scroll="list" :infinite-scroll-disabled="disabled">
                    <div class="item" v-for="(item, index) in data">
                        <a :href="item.to.url" target="_blank"><img :src="item.to.cover"></a>
                        <div class="details">
                            <a class="title" :href="item.to.url" target="_blank">{{item.to.nickname}}</a>
                            <div>
                                <div class="tag" style="color: #67C23A">积分+{{item.integral}}</div>
                            </div>
                        </div>
                        <div class="time">{{item.create_time}}</div>
                    </div>
                    <div v-if="loading" class="el-loader">加载中...</div>
                    <div v-if="noMore && loading === false" class="el-nomore">没有更多啦</div>
                </div>
            </el-card>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                text: '',
                data: [],
                search:{
                    page: 1,
                },
                loading: false,
            }
        },
        computed: {
            noMore() {
                return this.count <= this.data.length;
            },
            disabled() {
                return this.loading || this.noMore;
            }
        },
        methods: {
            /**
             * 加载列表
             */
            list() {
                let self = this;
                self.loading = true;
                post('api/userinvite/user/index', self.search, function (res) {
                    if (res.status === 'success') {
                        self.search.page++;
                        self.data  = self.data.concat(res.data);
                        self.count = res.count;
                        self.text  = res.url;
                    }
                    self.loading = false;
                })
            },
            /**
             * 复制链接
             */
            copyShaneUrl() {
                var input = document.createElement("input");   // js创建一个input输入框
                input.value = this.text;  // 将需要复制的文本赋值到创建的input输入框中
                document.body.appendChild(input);    // 将输入框暂时创建到实例里面
                input.select();// 选中输入框中的内容
                document.execCommand("Copy");   // 执行复制操作
                document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
                this.$notify({showClose: true, message: '复制分享链接成功', type: 'success'});
            }
        },
    });
</script>
</body>
</html>